<template>
  <view class="image-wrapper" :style="{'width':imgWidth+'px','height':imgHeight+'px'}">
    <up-image :src="videoCover" :width="imgWidth" :height="imgHeight" radius="2" @error="loadError" @load="loadOk">
      <template v-slot:loading>
        <up-loading-icon mode="semicircle" size="36"></up-loading-icon>
      </template>
      <template v-slot:error>
        <view style="font-size: 24rpx;">加载失败</view>
      </template>
    </up-image>

    <view v-if="imageLoadFlag" :class=" uploadFlag ?'exhibition-overlay':'upload-overlay'"
          :style="{ 'width': imgWidth + 'px', 'height': imgHeight + 'px' }" @click="previewVideo">
      <view class="upload-icon">
        <template v-if="uploadFlag">
          <up-icon size="36" color="#ffffff" name="play-circle"></up-icon>
        </template>
        <template v-if="!uploadFlag">
          <up-loading-icon mode="semicircle" color="#ffffff" size="36"></up-loading-icon>
        </template>
      </view>
      <view class="corner-text">{{ formatSeconds(videoDuration) }}</view>
    </view>

    <up-overlay opacity="0.8" :show="previewVideoFlag">
      <view class="preview-video">
        <view class="close-button">
          <up-icon name="close-circle" size="40px" color="#FCFCFC" stop @click="closePreviewVideo"></up-icon>
        </view>
        <view class="video-body">
          <video class="video" :src="src" :initial-time="initialTime" :show-fullscreen-btn="false" :autoplay="true"
                 @loadedmetadata="loadedmetadata" @progress="progress"></video>
        </view>
      </view>

    </up-overlay>
  </view>
</template>

<script setup lang="ts">


import { formatSeconds } from '@/utils';

const props = defineProps({
  src: {
    type: String,
    default: () => ''
  },
  mediaWidth: {
    type: Number,
    default: () => 0
  },
  mediaHeight: {
    type: Number,
    default: () => 0
  },
  videoCover: {
    type: String,
    default: () => ''
  },
  videoDuration: {
    type: Number,
    default: () => 0
  },
  me: {
    type: Boolean,
    default: () => false
  },
  uploadFlag: {
    type: Boolean,
    default: () => false
  }

});
const initialTime = ref<number>(0);
const imgWidth = computed(() => {
  return props.mediaWidth > 0 ? (props.mediaWidth / 8) : 100;
});
const imgHeight = computed(() => {
  return props.mediaHeight > 0 ? (props.mediaHeight / 8) : 100;
});

const previewVideoFlag = ref<boolean>(false);

const imageLoadFlag = ref<boolean>(false);

const loadError = () => {
  imageLoadFlag.value = false;
};
const loadOk = (e) => {
  imageLoadFlag.value = true;
};

const previewVideo = () => {
  if (!props.uploadFlag) return;

  previewVideoFlag.value = true;
};
const closePreviewVideo = () => {
  previewVideoFlag.value = false;
};
const loadedmetadata = () => {
  initialTime.value = 0;
};
const progress = (e) => {
  console.log(e);
};


</script>

<style scoped lang="scss">
.image-wrapper {
  position: relative;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.exhibition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.upload-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.corner-text {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  font-size: 14px;
  padding: 5px;
}

.preview-video {
  position: relative;
  width: 100vw;
  height: 100vh;

  .close-button {
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 9999;
  }

  .video-body {
    position: absolute;
    z-index: 1;

    .video {
      z-index: 1;
      width: 100vw;
      height: 100vh;
    }
  }
}
</style>
